<template>
	<div class="body1">
		<!-- 上半部分 -->
		<div class="user">
			<van-image
			class="user-image"
			  round
			  src="https://img01.yzcdn.cn/vant/cat.jpeg"
			/>
			<div class="name">{{name}}</div>
			<div class="credit-number">--</div>
			<div class="honor-number">--</div>
			<div class="credit">信用点数</div>
			<div class="honor">荣誉时数</div>
		</div>
	
	<!-- 下半部分 -->
	<!-- 第三个图片右边的边框线可以在后端数据传输过来后做一个判断，每次的第三个让样式覆盖，让border：0 -->
	<div class="bottom-half">
		<div class="grid-item">
			<div class="icon1">
				<van-icon name="location" size="3rem" color="blue"/></div>
			<span>签到</span>
		</div>
		<div class="grid-item">
			<div class="icon1">
				<van-icon class="icon2" name="cart-circle" size="3rem"color="yellow"/></div>
			<span>我的资料</span>
		</div>
		<div class="grid-item">
			<div class="icon">
				<van-icon name="bag" size="3rem" color="pink"/></div>
			<span>已报名</span>
		</div>
		<div class="grid-item">
			<div class="icon1">
				<van-icon name="balance-o" size="3rem" color="red"/></div>
			<span>签到</span>
		</div>
		<div class="grid-item">
			<div class="icon1">
				<van-icon class="icon2" name="info-o" size="3rem"/></div>
			<span>关于</span>
		</div>

	</div>
	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: '后端数据',
			}
		},
	}
</script>

<style scoped lang="less">
	.user {
		position: relative;
		height: 110px;
		background-color: #00669a;
		.user-image {
			position: absolute;
			left: 10px;
			top: 10px;
			width: 60px;
			height: 60px;
			background-color: pink;
			border-radius: 50%;
		}
		.name {
			position: absolute;
			top: 15px;
			left: 80px;
			color: white;
			font-size: 16px
		}
		.credit{
			position: absolute;
			top: 80px;
			left: 130px;
			font-size: 14px;
			color: white;
		}
		.credit-number{
			position: absolute;
			top: 55px;
			left: 150px;
			color: white;
		}
		.honor {
			position: absolute;
			top: 80px;
			font-size: 14px;
			right: 100px;
			color: white;
		}
		.honor-number {
			position: absolute;
			top: 55px;
			right: 120px;
			color: white;
		}
	}

	.body1 {
		background-color: #f2f2f2;
		height: 100vh;
	}
	
	.bottom-half {
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	
 .grid-item{
	 width: 33%;
	 display: flex;
	flex-direction: column;
	   align-items: center;
	   justify-content: center;
		box-sizing: border-box;
 }

 .icon1{
	 padding:0 10px 0 0;
	 border-right: 1px solid #919191;
 }
 
 .icon2 {
	 padding-left: 15px;
 }
 
  .icon {
		border-right: 0;
	}
</style>
